<template>
    <div
        class="page_root"
        :key="queryUpdateFlag"
        data-page-name="人物画像-新建-查看-编辑"
        data-page-identification="w_8rq1xzx30h"
    >
        <a-spin :spinning="pageLoading.loading" :tip="pageLoading.tip">
            <!--            新建/编辑-->
            <a-drawer
                :title="state.addOrEditTitle"
                placement="right"
                width="820px"
                :mask-closable="true"
                :visible="state.addOrEditVisible"
                @close="cancelDrawer"
                :body-style="{
                    paddingBottom: '0'
                }"
            >
                <div class="drawer-body">
                    <div class="drawer-main">
                        <div class="tip mg16">关键信息</div>
                        <a-form :model="state.modalForm" ref="formRef" layout="vertical">
                            <a-row :gutter="24">
                                <a-col :span="8">
                                    <a-form-item
                                        label="姓名"
                                        :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
                                        name="userName"
                                    >
                                        <a-input :placeholder="inputHolder" v-model:value="state.modalForm.userName" />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="8">
                                    <a-form-item
                                        label="职务"
                                        :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
                                        name="userPosition"
                                    >
                                        <a-input
                                            :placeholder="inputHolder"
                                            v-model:value="state.modalForm.userPosition"
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="8">
                                    <a-form-item
                                        label="职能与权限"
                                        :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
                                        name="userFunction"
                                    >
                                        <a-input
                                            :placeholder="inputHolder"
                                            v-model:value="state.modalForm.userFunction"
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="8">
                                    <a-form-item
                                        label="电话号码"
                                        :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
                                        name="phoneNumber"
                                    >
                                        <a-input :placeholder="inputHolder" v-model:value="state.modalForm.userName" />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="8">
                                    <a-form-item
                                        label="微信号"
                                        :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
                                        name="wechatNumber"
                                    >
                                        <a-input
                                            :placeholder="inputHolder"
                                            v-model:value="state.modalForm.wechatNumber"
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="24">
                                    <a-form-item
                                        label="掌握核心决策人及其权限"
                                        :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
                                        name="userCoreDecisionMakers"
                                    >
                                        <a-input
                                            :placeholder="inputHolder"
                                            v-model:value="state.modalForm.userCoreDecisionMakers"
                                        />
                                    </a-form-item>
                                </a-col>
                            </a-row>
                            <a-col :span="24">
                                <div class="bottom-tip deep-font mg20 flex"
                                    ><div> 履历 </div
                                    ><a-button type="link" @click="handleAddJob">
                                        <template #icon><PlusOutlined /></template>
                                        添加</a-button
                                    ></div
                                >
                            </a-col>
                            {{ state.modalForm.workExperienceList }}
                            <div
                                class="stage-item"
                                v-for="(item, index) in state.modalForm.workExperienceList"
                                :key="index"
                            >
                                <a-row :gutter="24">
                                    <a-col :span="7" class="gray-bgc">
                                        <a-form-item
                                            label="时间区间"
                                            :rules="[{ required: true, message: '请选择', trigger: 'blur' }]"
                                            :name="['workExperienceList', index, 'workTimeList']"
                                        >
                                            <a-range-picker
                                                picker="month"
                                                valueFormat="YYYY-MM"
                                                v-model:value="state.modalForm.workExperienceList[index].workTimeList"
                                            />
                                        </a-form-item>
                                    </a-col>
                                    <a-col :span="7" class="gray-bgc">
                                        <a-form-item
                                            label="单位"
                                            :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
                                            :name="['workExperienceList', index, 'company']"
                                        >
                                            <a-input
                                                :placeholder="inputHolder"
                                                v-model:value="state.modalForm.workExperienceList[index].company"
                                            />
                                        </a-form-item>
                                    </a-col>
                                    <a-col :span="7" class="gray-bgc">
                                        <a-form-item
                                            label="职务"
                                            :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
                                            :name="['workExperienceList', index, 'position']"
                                        >
                                            <a-input
                                                :placeholder="inputHolder"
                                                v-model:value="state.modalForm.workExperienceList[index].position"
                                            />
                                        </a-form-item>
                                    </a-col>
                                    <a-col :span="3" class="gray-bgc" style="display: flex; align-items: center">
                                        <MinusCircleOutlined
                                            style="cursor: pointer; color: #3875ff"
                                            @click="handleDeleteJob(index)"
                                        />
                                    </a-col>
                                </a-row>
                            </div>
                            <a-col :span="24">
                                <a-form-item
                                    label="生产和信息化岗位专业"
                                    :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
                                    name="userInformationProfessional"
                                >
                                    <a-input
                                        :placeholder="inputHolder"
                                        v-model:value="state.modalForm.userInformationProfessional"
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="24">
                                <a-form-item
                                    label="项目业绩"
                                    :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
                                    name="userPerformance"
                                >
                                    <a-input
                                        :placeholder="inputHolder"
                                        v-model:value="state.modalForm.userPerformance"
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="24">
                                <a-form-item
                                    label="核心下级情况"
                                    :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
                                    name="userCoreEmployee"
                                >
                                    <a-input
                                        :placeholder="inputHolder"
                                        v-model:value="state.modalForm.userCoreEmployee"
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="24">
                                <a-form-item
                                    label="核心上级情况"
                                    :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
                                    name="userCoreLeader"
                                >
                                    <a-input
                                        :placeholder="inputHolder"
                                        v-model:value="state.modalForm.userCoreLeader"
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="24">
                                <a-form-item
                                    label="项判断核心决策人职业背景对于信息化工业的阻碍、风险或益处"
                                    :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
                                    name="userBackgroudImpedeProfit"
                                >
                                    <a-input
                                        :placeholder="inputHolder"
                                        v-model:value="state.modalForm.userBackgroudImpedeProfit"
                                    />
                                </a-form-item>
                            </a-col>
                            <a-divider style="margin: 16px 0; background-color: #3875ff" />
                            <a-row :gutter="24">
                                <a-col :span="8">
                                    <a-form-item
                                        label="年龄"
                                        :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
                                        name="userAge"
                                    >
                                        <a-input :placeholder="inputHolder" v-model:value="state.modalForm.userAge" />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="8">
                                    <a-form-item
                                        label="晋升空间"
                                        :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
                                        name="userPromotionOpportunity"
                                    >
                                        <a-input
                                            :placeholder="inputHolder"
                                            v-model:value="state.modalForm.userPromotionOpportunity"
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="8">
                                    <a-form-item
                                        label="性格理念"
                                        :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
                                        name="userPersonalityConcept"
                                    >
                                        <a-input
                                            :placeholder="inputHolder"
                                            v-model:value="state.modalForm.userPersonalityConcept"
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="24">
                                    <a-form-item
                                        label="项判断核心决策人职业理念对于信息化工业的阻碍、风险或益处"
                                        :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
                                        name="userThoughtImpedeProfit"
                                    >
                                        <a-input
                                            :placeholder="inputHolder"
                                            v-model:value="state.modalForm.userThoughtImpedeProfit"
                                        />
                                    </a-form-item>
                                </a-col>
                            </a-row>
                            <a-row :gutter="24">
                                <a-col :span="8">
                                    <a-form-item
                                        label="对水泥配料项目态度"
                                        :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
                                        name="userCementIngrediantsAttitude"
                                    >
                                        <a-input
                                            :placeholder="inputHolder"
                                            v-model:value="state.modalForm.userCementIngrediantsAttitude"
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="8">
                                    <a-form-item
                                        label="敏感点"
                                        :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
                                        name="userSensitivePoints"
                                    >
                                        <a-input
                                            :placeholder="inputHolder"
                                            v-model:value="state.modalForm.userSensitivePoints"
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="24">
                                    <a-form-item
                                        label="项判断核心决策人职业敏感点对于信息化工业的阻碍、风险或益处"
                                        :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
                                        name="userSensitiveImpedeProfit"
                                    >
                                        <a-input
                                            :placeholder="inputHolder"
                                            v-model:value="state.modalForm.userSensitiveImpedeProfit"
                                        />
                                    </a-form-item>
                                </a-col>
                            </a-row>
                            <div class="tip mg16">基本信息-基本信息</div>
                            <a-row :gutter="24">
                                <a-col :span="8">
                                    <a-form-item
                                        label="性别"
                                        :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
                                        name="basicSex"
                                    >
                                        <a-select
                                            :options="state.sexList"
                                            v-model:value="state.modalForm.basicSex"
                                            :placeholder="selectHolder"
                                            show-search
                                            :filter-option="
                                                (input, option) => {
                                                    return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                }
                                            "
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="8">
                                    <a-form-item
                                        label="部门"
                                        :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
                                        name="basicDepartment"
                                    >
                                        <a-select
                                            :options="state.bmList"
                                            v-model:value="state.modalForm.basicDepartment"
                                            :placeholder="selectHolder"
                                            show-search
                                            :filter-option="
                                                (input, option) => {
                                                    return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                }
                                            "
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="8">
                                    <a-form-item
                                        label="职级"
                                        :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
                                        name="basicPositionLevel"
                                    >
                                        <a-select
                                            :options="state.zjList"
                                            v-model:value="state.modalForm.basicPositionLevel"
                                            :placeholder="selectHolder"
                                            show-search
                                            :filter-option="
                                                (input, option) => {
                                                    return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                }
                                            "
                                        />
                                    </a-form-item>
                                </a-col>
                            </a-row>
                            <a-row :gutter="24">
                                <a-col :span="8">
                                    <a-form-item label="籍贯">
                                        <a-tree-select
                                            v-model:value="state.modalForm.basicNativePlace"
                                            allowClear
                                            showSearch
                                            :placeholder="selectHolder"
                                            tree-default-expand-all
                                            :tree-data="state.jgList"
                                            :field-names="{ label: 'label', value: 'label' }"
                                            :filter-option="
                                                (input, option) => {
                                                    return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                }
                                            "
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="8">
                                    <a-form-item label="阴历生日">
                                        <a-date-picker
                                            valueFormat="YYYY-MM-DD"
                                            v-model:value="state.modalForm.basicLunarCalendarBirth"
                                            :placeholder="selectHolder"
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="8">
                                    <a-form-item label="阳历生日">
                                        <a-date-picker
                                            v-model:value="state.modalForm.basicSolarCalendarBirth"
                                            valueFormat="YYYY-MM-DD"
                                            :placeholder="selectHolder"
                                        />
                                    </a-form-item>
                                </a-col>
                            </a-row>
                            <a-row :gutter="24">
                                <a-col :span="8">
                                    <a-form-item label="学历">
                                        <a-select
                                            :options="state.xlList"
                                            v-model:value="state.modalForm.basicEducationalBackground"
                                            :placeholder="selectHolder"
                                            show-search
                                            :filter-option="
                                                (input, option) => {
                                                    return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                }
                                            "
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="8">
                                    <a-form-item label="婚姻状况">
                                        <a-select
                                            :options="state.hyList"
                                            v-model:value="state.modalForm.basicMaritalStatus"
                                            :placeholder="selectHolder"
                                            show-search
                                            :filter-option="
                                                (input, option) => {
                                                    return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                }
                                            "
                                        />
                                    </a-form-item>
                                </a-col>
                            </a-row>
                            <a-col :span="24">
                                <div class="bottom-tip deep-font mg20 flex"
                                    ><div> 子女状况 </div
                                    ><a-button type="link" @click="handleAddSon">
                                        <template #icon><PlusOutlined /></template>
                                        添加</a-button
                                    ></div
                                >
                            </a-col>
                            <div class="son-item" v-for="(item, index) in state.modalForm.childrenList" :key="index">
                                <a-row :gutter="24">
                                    <a-col :span="7" class="gray-bgc">
                                        <a-form-item label="性别">
                                            <a-select
                                                v-model:value="state.modalForm.childrenList[index].sex"
                                                :options="state.sexList"
                                                :placeholder="selectHolder"
                                                show-search
                                                :filter-option="
                                                    (input, option) => {
                                                        return (
                                                            option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                        )
                                                    }
                                                "
                                            />
                                        </a-form-item>
                                    </a-col>
                                    <a-col :span="7" class="gray-bgc">
                                        <a-form-item label="年龄">
                                            <a-input
                                                :placeholder="inputHolder"
                                                v-model:value="state.modalForm.childrenList[index].age"
                                            />
                                        </a-form-item>
                                    </a-col>
                                    <a-col :span="7" class="gray-bgc">
                                        <a-form-item label="学校">
                                            <a-input
                                                :placeholder="inputHolder"
                                                v-model:value="state.modalForm.school"
                                            />
                                        </a-form-item>
                                    </a-col>
                                    <a-col :span="3" class="gray-bgc" style="display: flex; align-items: center">
                                        <MinusCircleOutlined
                                            style="cursor: pointer; color: #3875ff"
                                            @click="handleDeleteSon(index)"
                                        />
                                    </a-col>
                                </a-row>
                                <a-row :gutter="24">
                                    <a-col :span="7" class="gray-bgc">
                                        <a-form-item label="专业">
                                            <a-input
                                                :placeholder="inputHolder"
                                                v-model:value="state.modalForm.professionalName"
                                            />
                                        </a-form-item>
                                    </a-col>
                                    <a-col :span="7" class="gray-bgc">
                                        <a-form-item label="喜好">
                                            <a-input
                                                :placeholder="inputHolder"
                                                v-model:value="state.modalForm.hobby"
                                            />
                                        </a-form-item>
                                    </a-col>
                                    <a-col :span="7" class="gray-bgc">
                                        <a-form-item label="其他">
                                            <a-input
                                                :placeholder="inputHolder"
                                                v-model:value="state.modalForm.other"
                                            />
                                        </a-form-item>
                                    </a-col>
                                    <a-col :span="3" class="gray-bgc" style="display: flex; align-items: center" />
                                </a-row>
                            </div>
                            <a-col :span="24">
                                <div class="bottom-tip deep-font mg20 flex"><div> 配偶状况 </div></div>
                            </a-col>
                            <a-row :gutter="24">
                                <a-col :span="8">
                                    <a-form-item label="年龄">
                                        <a-input :placeholder="inputHolder" v-model:value="state.modalForm.age" />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="8">
                                    <a-form-item label="职业">
                                        <a-input
                                            :placeholder="inputHolder"
                                            v-model:value="state.modalForm.postion"
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="8">
                                    <a-form-item label="喜好">
                                        <a-input
                                            :placeholder="inputHolder"
                                            v-model:value="state.modalForm.hobby"
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="8">
                                    <a-form-item label="其他">
                                        <a-input
                                            :placeholder="inputHolder"
                                            v-model:value="state.modalForm.other"
                                        />
                                    </a-form-item>
                                </a-col>
                            </a-row>
                            <div class="tip mg16">基本信息-工作信息</div>
                            <a-row :gutter="24">
                                <a-col :span="8">
                                    <a-form-item
                                        label="上任时间"
                                        :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
                                        name="workStartTime"
                                    >
                                        <a-date-picker
                                            v-model:value="state.modalForm.workStartTime"
                                            value-format="YYYY-MM-DD"
                                            :placeholder="selectHolder"
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="8">
                                    <a-form-item
                                        label="任期"
                                        :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
                                        name="workPeriod"
                                    >
                                        <a-input
                                            :placeholder="inputHolder"
                                            v-model:value="state.modalForm.workPeriod"
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="8">
                                    <a-form-item
                                        label="职业需求"
                                        :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
                                        name="workOccupationalNeeds"
                                    >
                                        <a-select
                                            v-model:value="state.modalForm.workOccupationalNeeds"
                                            :options="state.zyxqList"
                                            :placeholder="selectHolder"
                                            show-search
                                            :filter-option="
                                                    (input, option) => {
                                                        return (
                                                            option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                        )
                                                    }
                                                "
                                        />
                                    </a-form-item>
                                </a-col>
                            </a-row>
                            <div class="tip mg16">基本信息-生活信息</div>
                            <a-row :gutter="24">
                                <a-col :span="8">
                                    <a-form-item
                                        label="兴趣爱好"
                                        :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
                                        name="lifeInterestsHobbies"
                                    >
                                        <a-select
                                            :options="state.xqList"
                                            v-model:value="state.modalForm.lifeInterestsHobbies"
                                            :placeholder="selectHolder"
                                            show-search
                                            :filter-option="
                                                (input, option) => {
                                                    return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                }
                                            "
                                        />
                                    </a-form-item>
                                </a-col>
                            </a-row>
                            <a-col :span="24">
                                <div class="bottom-tip deep-font mg20 flex"><div> 饮食喜好 </div></div>
                            </a-col>
                            <a-row :gutter="24">
                                <a-col :span="8">
                                    <a-form-item
                                        label="品类"
                                        :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
                                        name="lifeFoodDrinkCategory"
                                    >
                                        <a-select
                                            :options="state.plList"
                                            v-model:value="state.modalForm.lifeFoodDrinkCategory"
                                            :placeholder="selectHolder"
                                            show-search
                                            :filter-option="
                                                (input, option) => {
                                                    return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                }
                                            "
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="8">
                                    <a-form-item
                                        label="口味"
                                        :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
                                        name="lifeFoodDrinkTaste"
                                    >
                                        <a-select
                                            :options="state.kwList"
                                            v-model:value="state.modalForm.lifeFoodDrinkTaste"
                                            :placeholder="selectHolder"
                                            show-search
                                            :filter-option="
                                                (input, option) => {
                                                    return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                }
                                            "
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="8">
                                    <a-form-item
                                        label="食材"
                                        :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
                                        name="lifeFoodDrinkFoodIngredients"
                                    >
                                        <a-select
                                            :options="state.scList"
                                            v-model:value="state.modalForm.lifeFoodDrinkFoodIngredients"
                                            :placeholder="selectHolder"
                                            show-search
                                            :filter-option="
                                                (input, option) => {
                                                    return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                }
                                            "
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="8">
                                    <a-form-item
                                        label="茶类"
                                        :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
                                        name="lifeFoodDrinkTea"
                                    >
                                        <a-select
                                            :options="state.teaList"
                                            v-model:value="state.modalForm.lifeFoodDrinkTea"
                                            :placeholder="selectHolder"
                                            show-search
                                            :filter-option="
                                                (input, option) => {
                                                    return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                }
                                            "
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="8">
                                    <a-form-item
                                        label="酒类"
                                        :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
                                        name="lifeFoodDrinkWine"
                                    >
                                        <a-select
                                            :options="state.jList"
                                            v-model:value="state.modalForm.lifeFoodDrinkWine"
                                            :placeholder="selectHolder"
                                            show-search
                                            :filter-option="
                                                (input, option) => {
                                                    return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                }
                                            "
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="8">
                                    <a-form-item
                                        label="香烟"
                                        :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
                                        name="lifeFoodDrinkSmoke"
                                    >
                                        <a-input
                                            :placeholder="inputHolder"
                                            v-model:value="state.modalForm.lifeFoodDrinkSmoke"
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="24">
                                    <a-form-item
                                        label="过敏源或习惯"
                                        :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
                                        name="lifeAllergen"
                                    >
                                        <a-input
                                            :placeholder="inputHolder"
                                            v-model:value="state.modalForm.lifeAllergen"
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="24">
                                    <a-form-item
                                        label="生活需求（家庭需求）"
                                        :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
                                        name="lifeNeeds"
                                    >
                                        <a-input :placeholder="inputHolder" v-model:value="state.modalForm.lifeNeeds" />
                                    </a-form-item>
                                </a-col>
                            </a-row>
                        </a-form>
                    </div>
                    <div class="bottom-btn">
                        <a-button
                            type="primary"
                            style="width: 138px"
                            @click="handleSubmitPeople"
                            :loading="state.submitLoading"
                            >保存</a-button
                        >
                    </div>
                </div>
            </a-drawer>
            <!--            新建/编辑-->
            <!-- begin vid_he7kuq24pr 自定义模板_hpt2v3xarp -->
            <div class="body">
                <div class="top-msg">
                    <div class="left-msg">
                        <div class="img-div">
                            <div class="img"> </div>
                        </div>

                        <div class="user-name">{{ state.detailData.userName }}</div>
                        <div class="user-post">{{ state.detailData.userPosition }}</div>
                    </div>
                    <a-button type="primary" @click="handleEditPeople(state.detailData)">
                        <template #icon>
                            <EditOutlined style="color: #fff" v-if="state.type === 'detail'" />
                            <PlusOutlined style="color: #fff" v-else />
                        </template>
                        {{ state.type === 'detail' ? '编辑' : '新建' }}</a-button
                    >
                </div>
                <div class="main">
                    <div class="content">
                        <div class="tip mg16">关键信息</div>
                        <div class="deep-font mg4">职能与权限:</div>
                        <div class="light-font mg16">{{ state.detailData.userFunction }}</div>
                        <div class="deep-font mg4">掌握核心决策人及其权限：</div>
                        <div class="light-font mg16">{{ state.detailData.userCoreDecisionMakers }}</div>
                        <div class="deep-font mg4">电话号码：</div>
                        <div class="light-font mg16">{{ state.detailData.phoneNumber }}</div>
                        <div class="deep-font mg4">微信号：</div>
                        <div class="light-font mg16">{{ state.detailData.wechatNumber }}</div>

                        <div class="deep-font mg8">履历：</div>
                        <div>
                            <a-timeline>
                                <a-timeline-item
                                    v-for="(item, index) in state.detailData.workExperienceList"
                                    :key="index"
                                >
                                    <template #dot>
                                        <div class="left-dot"></div>
                                    </template>
                                    <div class="timeline-content">
                                        <div class="content-box">
                                            <div class="text-left"
                                                ><span class="deep-font">{{ item.company }}</span> -
                                                <span class="light-font">{{ item.position }}</span></div
                                            >
                                            <div class="text-right gory-font">{{
                                                formatWorkTimeRange(item.workTimeList)
                                            }}</div>
                                        </div>
                                    </div>
                                </a-timeline-item>
                            </a-timeline>
                        </div>
                        <div class="deep-font mg4">生产和信息化岗位专业：</div>
                        <div class="light-font mg16">{{ state.detailData.userInformationProfessional }}</div>
                        <div class="deep-font mg4">项目业绩：</div>
                        <div class="light-font mg16">{{ state.detailData.userPerformance }}</div>
                        <div class="deep-font mg4">核心下级情况</div>
                        <div class="light-font mg16">{{ state.detailData.userCoreEmployee }}</div>
                        <div class="deep-font mg4">核心上级情况：</div>
                        <div class="light-font mg16">{{ state.detailData.userCoreLeader }}</div>
                        <div class="deep-font mg4">判断核心决策人职业背景对于信息化工业的阻碍、风险或益处：</div>
                        <div class="light-font mg16">{{ state.detailData.userBackgroudImpedeProfit }}</div>
                        <a-divider style="margin: 16px 0; background-color: #3875ff" />
                        <div class="deep-font mg4">年龄：</div>
                        <div class="light-font mg16">{{ state.detailData.userAge }}</div>
                        <div class="deep-font mg4">晋升空间：</div>
                        <div class="light-font mg16">{{ state.detailData.userPromotionOpportunity }}</div>
                        <div class="deep-font mg4">性格理念：</div>
                        <div class="light-font mg16">{{ state.detailData.userPersonalityConcept }}</div>
                        <div class="deep-font mg4">判断核心决策人职业理念对于信息化工业的阻碍、风险或益处：</div>
                        <div class="light-font mg16">{{ state.detailData.userThoughtImpedeProfit }}</div>
                        <a-divider style="margin: 16px 0; background-color: #3875ff" />
                        <div class="deep-font mg4">对水泥配料项目态度：</div>
                        <div class="light-font mg16">{{ state.detailData.userCementIngrediantsAttitude }}</div>
                        <div class="deep-font mg4">敏感点：</div>
                        <div class="light-font mg16">{{ state.detailData.userSensitivePoints }}</div>
                        <div class="deep-font mg4">判断核心决策人职业敏感点对于信息化工业的阻碍、风险或益处：</div>
                        <div class="light-font mg16">{{ state.detailData.userSensitiveImpedeProfit }}</div>
                    </div>
                    <div class="bottom-content">
                        <a-tabs v-model:activeKey="state.activeKey">
                            <a-tab-pane key="基本信息" tab="基本信息" />
                            <a-tab-pane key="工作信息" tab="工作信息" />
                            <a-tab-pane key="生活信息" tab="生活信息" />
                        </a-tabs>
                        <template v-if="state.activeKey === '基本信息'">
                            <div class="information-table mg16" style="margin-top: 0">
                                <div class="four-line middle-div" style="border-top: none">
                                    <div class="table-title">性别</div>
                                    <div class="table-content-four">{{ state.detailData.basicSex }}</div>
                                    <div class="table-title middle">部门</div>
                                    <div class="table-content-four">{{ state.detailData.basicDepartment }}</div>
                                    <div class="table-title middle">职级</div>
                                    <div class="table-content-four">{{ state.detailData.basicPositionLevel }}</div>
                                    <div class="table-title middle">籍贯</div>
                                    <div class="table-content-four">{{ state.detailData.basicNativePlace }}</div>
                                </div>
                                <div class="four-line middle-div">
                                    <div class="table-title">阴历生日</div>
                                    <div class="table-content-four">{{ state.detailData.basicDepartment }}</div>
                                    <div class="table-title middle">阳历生日</div>
                                    <div class="table-content-four">{{ state.detailData.basicLunarCalendarBirth }}</div>
                                    <div class="table-title middle">学历</div>
                                    <div class="table-content-four">{{
                                        state.detailData.basicEducationalBackground
                                    }}</div>
                                    <div class="table-title middle">婚姻状况</div>
                                    <div class="table-content-four">{{ state.detailData.basicMaritalStatus }}</div>
                                </div>
                            </div>
                            <div class="bottom-tip deep-font mg16">子女状况</div>
                            <div class="base-table mg16">
                                <a-table
                                    :columns="sonColumns"
                                    :data-source="state.detailData.childrenList"
                                    :pagination="false"
                                />
                            </div>
                            <div class="bottom-tip deep-font mg16">配偶状况</div>
                            <div class="base-table mg16">
                                <a-table
                                    :columns="spouseColumns"
                                    :data-source="[state.detailData.workExperienceList]"
                                    :pagination="false"
                                />
                            </div>
                        </template>
                        <template v-if="state.activeKey === '工作信息'">
                            <div
                                class="information-table mg16"
                                style="border-top: none; border-bottom: none; margin: 0"
                            >
                                <div class="four-line">
                                    <div class="table-title">上任时间</div>
                                    <div class="table-content-four">{{ state.detailData.workStartTime }}</div>
                                    <div class="table-title middle">任期</div>
                                    <div class="table-content-four">{{ state.detailData.workPeriod }}</div>
                                    <div class="table-title middle">职业需求</div>
                                    <div class="table-content-four">{{ state.detailData.workOccupationalNeeds }}</div>
                                </div>
                            </div>
                        </template>
                        <template v-if="state.activeKey === '生活信息'">
                            <div class="deep-font mg4">兴趣爱好：</div>
                            <div class="light-font mg16">{{ state.detailData.lifeInterestsHobbies }}</div>
                            <div class="bottom-tip deep-font mg16">饮食喜好</div>
                            <div class="information-table mg16">
                                <div class="four-line middle-div" style="border-top: none">
                                    <div class="table-title">品类</div>
                                    <div class="table-content-four">{{ state.detailData.lifeFoodDrinkCategory }}</div>
                                    <div class="table-title middle">口味</div>
                                    <div class="table-content-four">{{ state.detailData.lifeFoodDrinkTaste }}</div>
                                    <div class="table-title middle">食材</div>
                                    <div class="table-content-four">{{
                                        state.detailData.lifeFoodDrinkFoodIngredients
                                    }}</div>
                                    <div class="table-title middle">茶类</div>
                                    <div class="table-content-four">{{ state.detailData.lifeFoodDrinkTea }}</div>
                                </div>
                                <div class="four-line middle-div">
                                    <div class="table-title">酒类</div>
                                    <div class="table-content-four">{{ state.detailData.lifeFoodDrinkWine }}</div>
                                    <div class="table-title middle">香烟</div>
                                    <div class="table-content-four">{{ state.detailData.lifeFoodDrinkSmoke }}</div>
                                    <div class="table-title middle"></div>
                                    <div class="table-content-four"></div>
                                    <div class="table-title middle"></div>
                                    <div class="table-content-four"></div>
                                </div>
                            </div>
                            <div class="deep-font mg4">过敏原或习惯：</div>
                            <div class="light-font mg16">{{ state.detailData.lifeAllergen }}</div>
                            <div class="deep-font mg4">生活需求（家庭需求）：</div>
                            <div class="light-font mg16">{{ state.detailData.lifeNeeds }}</div>
                        </template>
                    </div>
                </div>
            </div>
            <!-- end vid_he7kuq24pr 自定义模板_hpt2v3xarp -->
        </a-spin>
    </div>
</template>
<script setup lang="tsx">
    import {
        h,
        ref,
        reactive,
        toRaw,
        markRaw,
        watch,
        computed,
        onBeforeMount,
        onMounted,
        onBeforeUnmount,
        onUnmounted,
        onActivated,
        onDeactivated
    } from 'vue'
    import { useRoute, useRouter } from 'vue-router'
    const router = useRouter()
    const route = useRoute()
    import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios'
    import {
        cloneDeep,
        localGet,
        merge,
        getDifferenceArray,
        traversalTreeStructure,
        checkCaseCondition,
        renderStringInTemplate,
        handleBreadcrumbJump,
        throttle,
        permission,
        getComponentParamsValue
    } from '@/utils/index'
    import { isNullOrEmpty, isEmptyArr, isNullOrUnDef, isContained, isArray, isEmpty, isObject } from '@/utils/is'
    import dayjs from 'dayjs'
    import { getPagePcChartsDataSourceConvert } from '@/utils/chart'
    import { message, notification, Modal } from 'ant-design-vue'
    import {
        propertyFormatByNumber,
        propertyFormatByPercentage,
        propertyFormatByDate,
        parseSubFromDataList
    } from '@/utils/format'
    import colorTheme from '@/design/custom-theme.json'
    /*** PUBLISH_EXEGESIS ***
 import UserTableRecords from '@/model/UserTableRecords';
 import { getAppBaseUrl } from '@/utils/index';
 import { sendToken } from "@/hooks/useIframeToken";
 import { useSystemStore } from "@/store/modules/system";
 const systemStore = useSystemStore();
 *** PUBLISH_EXEGESIS ***/

    // 获取传入的流程ID和组件参数
    const props = defineProps({
        'processInstanceId': {
            type: [String, Number, Boolean],
            default: undefined
        }
    })
    const immediateWatch = (source, callback) => {
        watch(source, callback, { deep: true, immediate: true })
    }

    /* -------------------------- 属性定义 -------------------------- */

    const setTimeOutList = []
    const pageLoading = reactive({
        loading: false,
        tip: undefined
    })
    const authInfo = localGet('app-user-store')

    // 处理校验
    const setSubFormName = (parentInfo, name) => {
        return [parentInfo.parents, parentInfo.cycleIndex, name]
    }

    /* ========================== 属性定义 ========================== */

    /* -------------------------- 元素数据引用 -------------------------- */

    /* ========================== 元素数据引用 ========================== */

    /* -------------------------- 页面数据 -------------------------- */

    /* ========================== 页面数据 ========================== */

    /* -------------------------- 响应 -------------------------- */

    /* ========================== 响应 ========================== */

    /* -------------------------- 函数 -------------------------- */

    /* ========================== 函数 ========================== */

    /* -------------------------- 页面参数 -------------------------- */

    const pageParameter_state = reactive({
        'processInstanceId': props.processInstanceId ?? route.query.processInstanceId
    })

    /* ========================== 页面参数 ========================== */

    /* -------------------------- 组件事件处理方法 -------------------------- */

    // ---------------------------- 组件数据同步 ----------------------------

    // ============================ 组件数据同步 ============================

    /* ========================== 组件事件处理方法 ========================== */

    /* -------------------------- 生命周期 -------------------------- */
    // 用于参数变更后重新执行自定义指令
    const queryUpdateFlag = ref(0)
    onMounted(() => {})

    onUnmounted(() => {
        // 销毁定时器
        setTimeOutList.forEach(({ repeat, timer }) => {
            repeat ? clearInterval(timer) : clearTimeout(timer)
        })
    })

    /* ========================== 生命周期 ========================== */

    /* -------------------------- 数据关联处理 -------------------------- */

    /* -------------------------- 表单数据同步 -------------------------- */
    /* ========================== 表单数据同步 ========================== */

    /* ========================== 数据关联处理 ========================== */

    /* -------------------------- 不同组件自定义的处理逻辑 -------------------------- */

    /* ========================== 不同组件自定义的处理逻辑 ========================== */

    // ================================定制化逻辑======================================== onMounted(() => {

    onMounted(() => {
        const urlParams = new URLSearchParams(window.location.search)

        // 获取单个参数
        state.detailId = urlParams?.get('id')
        state.areaId = urlParams?.get('areaId')
        state.type = urlParams?.get('type')
        state.source = urlParams?.get('source')
        state.urlMiddle = urlMiddleMap[state.source]
        if (state.detailId) {
            getData()
            console.log('查看')
        } else {
            state.addOrEditVisible = true
            state.addOrEditTitle = '新建'
        }
        loadAllDictionaries()
    })
    const llData = [
        {
            id: 1
        },
        {
            id: 2
        },
        {
            id: 3
        }
    ]
    const sonColumns = ref([
        {
            title: '性别',
            align: 'center',
            dataIndex: 'sex',
            ellipsis: true
        },
        {
            title: '年龄',
            align: 'center',
            dataIndex: 'age',
            ellipsis: true
        },
        {
            title: '学校',
            align: 'center',
            dataIndex: 'school',
            ellipsis: true
        },
        {
            title: '专业',
            align: 'center',
            dataIndex: 'professionalName',
            ellipsis: true
        },
        {
            title: '喜好',
            align: 'center',
            dataIndex: 'hobby',
            ellipsis: true
        },
        {
            title: '其他',
            align: 'center',
            dataIndex: 'other',
            ellipsis: true
        }
    ])
    const spouseColumns = ref([
        {
            title: '年龄',
            align: 'center',
            dataIndex: 'age',
            ellipsis: true
        },
        {
            title: '职业',
            align: 'center',
            dataIndex: 'postion',
            ellipsis: true
        },

        {
            title: '喜好',
            align: 'center',
            dataIndex: 'hobby',
            ellipsis: true
        },
        {
            title: '其他',
            align: 'center',
            dataIndex: 'other',
            ellipsis: true
        }
    ])
    const state = reactive({
        detailId: undefined,
        areaId: undefined,
        source: undefined,
        type: undefined,
        urlMiddle: undefined,
        submitLoading: false,
        detailData: {},
        activeKey: '基本信息',
        addOrEditVisible: false,
        addOrEditTitle: '',
        modalForm: {
            userName: undefined,
            phoneNumber: undefined,
            wechatNumber: undefined,
            userPosition: undefined,
            userFunction: undefined,
            workExperienceList: [
                {
                    workTimeList: undefined,
                    company: undefined,
                    position: undefined
                }
            ],
            userInformationProfession: undefined,
            userPerformance: undefined,
            userCoreLeader: undefined,
            userCoreEmployee: undefined,
            userBackgroudImpedeProfit: undefined,
            userThoughtImpedeProfit: undefined,
            userSensitiveImpedeProfit: undefined,
            basicSex: undefined,
            basicDepartment: undefined,
            basicPositionLevel: undefined,
            basicNativePlace: undefined,
            basicSolarCalendarBirth: undefined,
            basicLunarCalendarBirth: undefined,
            basicEducationalBackground: undefined,
            basicMaritalStatus: undefined,
            workStartTime: undefined,
            workPeriod: undefined,
            workOccupationalNeeds: undefined,
            lifeInterestsHobbies: undefined,
            lifeFoodDrinkCategory: undefined,
            lifeFoodDrinkTaste: undefined,
            lifeFoodDrinkFoodIngredients: undefined,
            lifeFoodDrinkTea: undefined,
            lifeFoodDrinkWine: undefined,
            lifeFoodDrinkSmoke: undefined,
            lifeAllergen: undefined,
            lifeNeeds: undefined,
            userAge: undefined,
            userPersonalityConcept: undefined,
            userPromotionOpportunity: undefined,
            userCementIngrediantsAttitude: undefined,
            userSensitivePoints: undefined,
            childrenList: [
                {
                    sex: undefined,
                    age: undefined,
                    professionalName: undefined,
                    school: undefined,
                    hobby: undefined,
                    other: undefined
                }
            ]
        },
        //     部门
        bmList: [],
        //     职位
        zwList: [],
        //     性别
        sexList: [],
        //     职级
        zjList: [],
        //     籍贯
        jgList: [
            {
                'label': '北京',
                'value': '北京',
                'children': [
                    {
                        'label': '东城区',
                        'value': '东城区'
                    },
                    {
                        'label': '西城区',
                        'value': '西城区'
                    },
                    {
                        'label': '朝阳区',
                        'value': '朝阳区'
                    }
                ]
            },
            {
                'label': '上海',
                'value': '上海',
                'children': [
                    {
                        'label': '黄浦区',
                        'value': '黄浦区'
                    },
                    {
                        'label': '徐汇区',
                        'value': '徐汇区'
                    },
                    {
                        'label': '浦东新区',
                        'value': '浦东新区'
                    }
                ]
            },
            {
                'label': '天津',
                'value': '天津',
                'children': [
                    {
                        'label': '和平区',
                        'value': '和平区'
                    },
                    {
                        'label': '河西区',
                        'value': '河西区'
                    },
                    {
                        'label': '南开区',
                        'value': '南开区'
                    }
                ]
            },
            {
                'label': '重庆',
                'value': '重庆',
                'children': [
                    {
                        'label': '渝中区',
                        'value': '渝中区'
                    },
                    {
                        'label': '江北区',
                        'value': '江北区'
                    },
                    {
                        'label': '南岸区',
                        'value': '南岸区'
                    }
                ]
            },
            {
                'label': '广东',
                'value': '广东',
                'children': [
                    {
                        'label': '广州',
                        'value': '广州'
                    },
                    {
                        'label': '深圳',
                        'value': '深圳'
                    },
                    {
                        'label': '佛山',
                        'value': '佛山'
                    },
                    {
                        'label': '珠海',
                        'value': '珠海'
                    }
                ]
            },
            {
                'label': '江苏',
                'value': '江苏',
                'children': [
                    {
                        'label': '南京',
                        'value': '南京'
                    },
                    {
                        'label': '苏州',
                        'value': '苏州'
                    },
                    {
                        'label': '无锡',
                        'value': '无锡'
                    }
                ]
            },
            {
                'label': '浙江',
                'value': '浙江',
                'children': [
                    {
                        'label': '杭州',
                        'value': '杭州'
                    },
                    {
                        'label': '宁波',
                        'value': '宁波'
                    },
                    {
                        'label': '温州',
                        'value': '温州'
                    }
                ]
            },
            {
                'label': '山东',
                'value': '山东',
                'children': [
                    {
                        'label': '济南',
                        'value': '济南'
                    },
                    {
                        'label': '青岛',
                        'value': '青岛'
                    },
                    {
                        'label': '烟台',
                        'value': '烟台'
                    }
                ]
            },
            {
                'label': '四川',
                'value': '四川',
                'children': [
                    {
                        'label': '成都',
                        'value': '成都'
                    },
                    {
                        'label': '绵阳',
                        'value': '绵阳'
                    },
                    {
                        'label': '德阳',
                        'value': '德阳'
                    }
                ]
            },
            {
                'label': '湖北',
                'value': '湖北',
                'children': [
                    {
                        'label': '武汉',
                        'value': '武汉'
                    },
                    {
                        'label': '宜昌',
                        'value': '宜昌'
                    },
                    {
                        'label': '襄阳',
                        'value': '襄阳'
                    }
                ]
            },
            {
                'label': '湖南',
                'value': '湖南',
                'children': [
                    {
                        'label': '长沙',
                        'value': '长沙'
                    },
                    {
                        'label': '株洲',
                        'value': '株洲'
                    },
                    {
                        'label': '湘潭',
                        'value': '湘潭'
                    }
                ]
            },
            {
                'label': '福建',
                'value': '福建',
                'children': [
                    {
                        'label': '福州',
                        'value': '福州'
                    },
                    {
                        'label': '厦门',
                        'value': '厦门'
                    },
                    {
                        'label': '泉州',
                        'value': '泉州'
                    }
                ]
            },
            {
                'label': '河北',
                'value': '河北',
                'children': [
                    {
                        'label': '石家庄',
                        'value': '石家庄'
                    },
                    {
                        'label': '唐山',
                        'value': '唐山'
                    },
                    {
                        'label': '保定',
                        'value': '保定'
                    }
                ]
            },
            {
                'label': '山西',
                'value': '山西',
                'children': [
                    {
                        'label': '太原',
                        'value': '太原'
                    },
                    {
                        'label': '大同',
                        'value': '大同'
                    },
                    {
                        'label': '临汾',
                        'value': '临汾'
                    }
                ]
            }
        ],
        //     学历
        xlList: [],
        //     婚姻
        hyList: [],
        //     兴趣
        xqList: [],
        //     品类
        plList: [],
        //     口味
        kwList: [],
        //     食材
        scList: [],
        //     茶类
        teaList: [],
        //     酒
        jList: [],
        // 职业需求
        zyxqList:[]
    })
    const urlMiddleMap = {
        'area': 'customer_area_user_portrait',
        'factory': 'customer_area_factory_user_portrait'
    }
    const dictMap = {
        bmList: 'CUSTOMER.AREA.DEPARTMENT',
        zwList: 'CUSTOMER.AREA.POSITION',
        sexList: 'CUSTOMER.AREA.SEX',
        zjList: 'CUSTOMER.AREA.POSITION-LEVEL',
        xlList: 'CUSTOMER.AREA.RESUME',
        hyList: 'CUSTOMER.AREA.MARRIAGE',
        xqList: 'CUSTOMER.AREA.HOBBY',
        plList: 'CUSTOMER.AREA.EAT.CATEGORY',
        kwList: 'CUSTOMER.AREA.EAT.TASTE',
        scList: 'CUSTOMER.AREA.EAT.FOOD',
        teaList: 'CUSTOMER.AREA.EAT.TEA',
        jList: 'CUSTOMER.AREA.EAT.WINE',
        zyxqList: 'CUSTOMER.AREA.OCCUPATIONAL.NEEDS'
    }
    function loadAllDictionaries() {
        Object.entries(dictMap).forEach(([key, apiKey]) => {
            fetchDictionary(apiKey, key as keyof typeof state)
        })
    }
    function fetchDictionary(apiKey, target: keyof typeof state) {
        get(`/solution-ppm/api/v2/built-in-system-ppm/dictionary/search/${apiKey}`).then(data => {
            if (data.code !== 200) {
                message.error(data.message)
                return
            }
            state[target] = data.data.map(item => ({
                label: item.itemName,
                value: item.itemName
            }))
        })
    }

    const llItem = {
        workTimeList: undefined,
        company: undefined,
        position: undefined
    }
    const sonItem = {
        sex: undefined,
        age: undefined,
        professionalName: undefined,
        school: undefined,
        hobby: undefined,
        other: undefined
    }
    const inputHolder = '请输入'
    const selectHolder = '请选择'
    const formRef = ref(null)
    function getData() {
        get(`/solution-ppm/api/v2/built-in-system-ppm/${state.urlMiddle}/${state.detailId}`).then(data => {
            if (data.code !== 200) {
                message.error(data.message)
                return
            }
            state.detailData = data.data
        })
    }
    function cancelDrawer() {
        state.addOrEditVisible = false
    }
    function handleAddJob() {
        state.modalForm.workExperienceList.push({ ...llItem })
    }
    function handleDeleteJob(index) {
        state.modalForm.workExperienceList.splice(index, 1)
    }
    function handleAddSon() {
        state.modalForm.childrenList.push({ ...sonItem })
    }
    function handleDeleteSon(index) {
        state.modalForm.childrenList.splice(index, 1)
    }
    function handleEditPeople(record) {
        const data = cloneDeep(record)
        Object.assign(state.modalForm, data)
        state.addOrEditVisible = true
    }
    //     保存
    function handleSubmitPeople() {
        const api = state.type === 'detail' ? put : post
        // const url = state.detailId
        //     ? `/solution-ppm/api/v2/built-in-system-ppm/${state.urlMiddle}/${state.detailId ? state.detailId : ''}`
        //     : `/solution-ppm/api/v2/built-in-system-ppm/${state.urlMiddle}`
        api(
            `/solution-ppm/api/v2/built-in-system-ppm/${state.urlMiddle}${state.detailId ? `/${state.detailId}` : ''}`,
            {
                ...state.modalForm,
                areaId: state.source === 'area' ? state.areaId : '',
                factoryId: state.source === 'factory' ? state.areaId : ''
            }
        ).then(data => {
            if (data.code !== 200) {
                message.error(data.message)
                return
            }
            message.success(data.message)
            if (state.type === 'add') {
                Object.assign(state.detailData, data.data)
                state.detailId = data.data.id
                state.type = 'detail'
                window.history.replaceState(
                    {},
                    '',
                    `?id=${state.detailId}&areaId=${state.areaId}&source=${state.source}&type=detail`
                )
            } else {
                getData()
            }

            state.addOrEditVisible = false
        })
    }
    function formatWorkTimeRange(list) {
        if (Array.isArray(list) && list.length === 2) {
            return `${list[0].replace('-', '.')} - ${list[1].replace('-', '.')}`
        }
        return ''
    }
</script>
<style lang="less" scoped>
    .page_root {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    .page_root :deep(.@{ant-prefix}-spin-nested-loading),
    .page_root :deep(.@{ant-prefix}-spin-container) {
        height: 100%;
    }
    .page_root :deep(.@{ant-prefix}-spin-container .@{ant-prefix}-table-wrapper) {
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-start;
    }
    .page_root :deep(.@{ant-prefix}-table) {
        flex: auto;
        overflow: auto;
    }
    .table-moreBtn_down {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 100px;
    }

    .table-moreBtn_menu :deep(.table-moreBtn_menu-item):hover {
        background: #ebf1ff;
    }

    /*  表格树结构样式处理，展开按钮层级增加*/
    :deep(.@{ant-prefix}-table-row-expand-icon) {
        z-index: 1;
    }
    /*  表格树结构 由于每个表格项采用自定义组件，使用绝对定位布局，开启树结构导致显示异常，暂时使用层级定位位置 */
    :deep(.@{ant-prefix}-table-row-level-1 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 15px !important;
        width: calc(100% - 15px);
    }
    :deep(.@{ant-prefix}-table-row-level-2 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 30px !important;
        width: calc(100% - 30px);
    }
    :deep(.@{ant-prefix}-table-row-level-3 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 45px !important;
        width: calc(100% - 45px);
    }
    :deep(.@{ant-prefix}-table-row-level-4 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 60px !important;
        width: calc(100% - 60px);
    }

    /* 穿梭框改变默认样式，为根据组件样式控制左右栏宽度。 */
    :deep(.@{ant-prefix}-transfer-workExperienceList) {
        height: 100%;
        width: 50%;
    }
    /*样式*/
    .body {
        height: 100%;
    }
    .top-msg {
        height: 72px;
        padding: 16px 24px;
        border-radius: 4px;
        background-color: #fff;
        margin-bottom: 16px;
        display: flex;
        justify-content: space-between;
    }
    .left-msg {
        display: flex;
        gap: 16px;
        align-items: center;
    }
    .user-name {
        font-size: 24px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 600;
    }
    .user-post {
        font-size: 16px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 400;
    }
    .img-div {
        width: 40px;
        height: 40px;
        display: flex;
        border-radius: 50%;
        align-items: center;
        justify-content: center;
        background: #ebf1ff;
    }
    .img {
        width: 20px;
        height: 20px;
        background-image: url('http://10.40.0.33:9001/file-storage/510422284987533312-source.png');
        background-size: cover;
    }
    .main {
        overflow-y: auto;
        height: calc(100% - 100px);
    }
    .content {
        padding: 24px;
        background-color: #fff;
        border-radius: 4px;
        margin-bottom: 16px;
    }
    .tip {
        height: 16px;
        line-height: 16px;
        padding-left: 8px;
        border-left: 4px solid #3875ff;
        font-size: 16px;
        color: #000000;
        letter-spacing: 0;
        font-weight: 600;
    }
    .mg16 {
        margin-bottom: 16px;
    }
    .mg4 {
        margin-bottom: 4px;
    }
    .light-font {
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 400;
    }
    .deep-font {
        font-family: PingFangSC-Medium;
        font-size: 14px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 500;
    }

    .timeline-content {
        flex: 1;
        background: rgba(56, 117, 255, 0.1);
        border-radius: 4px;
        padding: 12px 16px;
        width: 100%;
    }

    .content-box {
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        color: #333;
    }
    .left-dot {
        width: 12px;
        height: 12px;
        border: 1px solid #3875ff;
        border-radius: 50%;
        position: relative;
    }
    :deep(.ant3-timeline-item-tail) {
        border: 1px dashed #3875ff;
    }
    .gory-font {
        font-size: 14px;
        color: #595959;
        letter-spacing: 0;
        font-weight: 400;
    }
    .mg8 {
        margin-bottom: 8px;
    }
    :deep(.ant3-timeline-item-last) {
        padding-bottom: 5px !important;
    }
    .bottom-content {
        padding: 0 24px 18px 24px;
        background: #ffffff;
        border-radius: 4px;
    }
    .information-table {
        margin-top: 23px;
        border: 1px solid #d9d9d9;
        border-radius: 4px;
    }
    .table-title {
        font-size: 14px;
        color: #595959;
        letter-spacing: 0;
        text-align: right;
        font-weight: 400;
        width: 122px;
        text-align: right;
        line-height: 24px;
        padding: 8px 16px;
        border-right: 1px solid #d9d9d9;
        flex-shrink: 0; /* 不允许压缩 */
        background: #f5f8ff;
        border-radius: 4px 0 0 0;
    }
    .table-content {
        padding: 10px 17px;
        font-size: 14px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 500;
    }
    .table-content-one,
    .table-content-four {
        padding: 10px 17px;
        font-size: 14px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 500;
        line-height: 20px;
    }
    .one-line,
    .four-line {
        height: 40px;
        display: flex;
        line-height: 40px;
    }
    .four-line {
        border-top: 1px solid #d9d9d9;
        border-bottom: 1px solid #d9d9d9;
    }
    .table-content-four {
        flex: 1;
        text-overflow: ellipsis; /* 如果内容过长显示省略号 */
        overflow: hidden;
        white-space: nowrap;
    }
    .middle {
        border-left: 1px solid #d9d9d9;
    }
    .middle-div {
        border-bottom: none;
    }
    .bottom-tip {
        height: 14px;
        line-height: 14px;
        border-left: 2px solid #3875ff;
        padding-left: 6px;
        display: flex;
        gap: 40px;
    }
    .base-table:deep(.@{ant-prefix}-table-thead) > tr > th {
        background: #f5f8ff;
        color: #262626;
        font-weight: 600;
        padding: 10px 16px;
        border-right: 1px solid #d9d9d9 !important;
        position: relative;
    }
    .base-table :deep(.@{ant-prefix}-table-tbody) tr > td {
        font-size: 14px;
        font-family: arial, helvetica, 'microsoft yahei';
        font-weight: 400;
        color: #262626;
        border-bottom: 1px solid #d9d9d9;
        padding: 8px 16px;
        word-break: break-all;
    }
    .mg20 {
        margin-bottom: 20px;
    }
    .flex {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .gray-bgc {
        background-color: #fafafa;
        padding-top: 16px;
        border-radius: 4px;
    }
    .drawer-body:deep(.ant3-picker) {
        width: 100%;
    }
    .drawer-body {
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    .drawer-main {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
    }
    .bottom-btn {
        height: 72px;
        flex-shrink: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        border-top: 1px solid #f0f0f0; /* 可选的分隔线 */
        background-color: #fff; /* 确保按钮不被内容遮挡 */
        z-index: 10; /* 若上面有浮层可适当加 */
    }
</style>
